const $=require("jquery");

// 程序流程
// 1.读取checklist.json，显示读取结果
// 2.用户点击“开始检查”
// 3.执行检查过程（异步）

var jsondata;

$(document).ready(function(){
    inputfile = document.getElementById('InputFile');
    inputhelp = document.getElementById('InputHelp');
    inputfile.addEventListener('change', function () {
        inputhelp.innerHTML = "导航菜单中可下载模板";
        if(!inputfile.value) {
            inputhelp.innerHTML = '没有选择文件';
            return;
        }

        let file = inputfile.files[0];
        //判断文件大小
        let size = file.size;
        if(size > 1024*1024){
            const ban_icon = "<span class=\"glyphicon glyphicon-ban-circle\" aria-hidden=\"true\"></span>";
            inputhelp.innerHTML = ban_icon+'上传文件不能大于1MB';
            return false;
        }

        $.ajax("/api/upload", {
            method: "post",
            dataType : "json",
            data: file,
            processData: false,
            contentType: false,
            success: function (data) {
                // console.log(data);
                // console.log(data[0]["filename"]);

                readJson(data[0]["filename"])

                // $("#test").html(html); //在html页面id=test的标签里显示html内容

                // if(res.head["Code"]=="success"){
                //     // console.log("upload success");
                //     console.log(res.data["filename"])
                //     // let f = res.data["filename"]
                //     // readJson(f)
                //
                // }else if(res.header(["Code"]=="failed"){
                //     console.log("upload failed");
                // }else{
                //     console.log(res);
                // }
            },
            error: function () {
                console.log("upload api access failed")
                return
            }
        });

    })
});

function readJson(f) {
    console.log("function readJson: "+f);
    $.getJSON(f,function(data){
        jsondata = data;
        var $mainFrame = $("#main_frame");
        var strHtml = "";
        $mainFrame.innerHTML = "";
        $.each(jsondata,function(index,content){
            strHtml += "序号："+index+"<br>";
            strHtml += "实例名："+content["instance"]+"<br>";
            strHtml += "实例IP："+content["ip"]+"<br>";
            strHtml += "测试URL："+content["check_url"]+"<br>";
            strHtml += "<hr>"
        });
        strHtml+="<button id='submitBtn' class=\"btn btn-primary\">提交测试</button>"
        $mainFrame.html(strHtml);//显示处理后的数据
        addBtnEvent("submitBtn");
    });
}

function addBtnEvent(id){
    $("#"+id).bind("click",function(){
        var $mainFrame = $("#main_frame");
        var strHtml = "<h3>正在测试联通性...</h3>";
        const wait_icon = "<span><img src='./img/waiting.gif' alt=''></span>";
        const ok_icon = "<span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span>"
        const error_icon = "<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>"

        const blank = "&nbsp";
        $.each(jsondata,function(index,content){
            strHtml += "<span id="+index+">实例名："+content["instance"]+wait_icon+"</span>"+"<br>";
        });

        $mainFrame.html(strHtml);

        $.each(jsondata,function(index,content) {
            $.ajax({
                url : content["check_url"],
                data : "",
                success : function() {
                    $("#"+index).html("<span id="+index+">实例名："+content["instance"]+ok_icon+"</span>")
                },
                error: function () {
                    try {
                        $("#"+index).html("<span id="+index+">实例名："+content["instance"]+error_icon+"</span>")
                    } catch(e) {
                        console.log(e)
                    }
                }
            })
        })
    })
}
